<template>
  <div>
    <div class="order-page">
      <el-table :data="orders" style="width: 100%">
        <el-table-column prop="date" label="下单日期" width="250" fixed>
          <template slot-scope="scope">
            <div>{{ scope.row.createTime }}</div>
            <div>订单号: {{ scope.row.id }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="sku" label="宝贝详情" width="330" fixed>
          <template slot-scope="scope">
            <el-col :span="7">
              <el-image :src="require(`@/${scope.row.img}`)" alt width="80" height="100" />
            </el-col>
            <el-col :span="17">
              <div>{{ scope.row.skuDescribe }}</div>
            </el-col>
          </template>
        </el-table-column>
        <el-table-column prop="itemPrice" label="宝贝单价" width="150">
          <template slot-scope="scope">
            <div>¥{{ scope.row.itemPrice }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="buyNum" label="宝贝数量" width="150">
          <template slot-scope="scope">
            <div>{{ scope.row.buyNum }}件</div>
          </template>
        </el-table-column>
        <el-table-column prop="total" label="实付款" width="150">
          <template slot-scope="scope">
            <div>¥{{ scope.row.payMoney }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="place" label="发货地" width="150">
          <template slot-scope="scope">
            <div>{{ scope.row.itemPlace }}物流总部</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="宝贝状态" width="150" fixed="right">
          <template slot-scope="scope">
            <div>{{ orderStatus(scope.row.status) }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="actions" label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button @click="stopOrder(scope.row.id)">取消订单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :page-sizes="[3, 5, 10, 20]"
        :page-size="pageSize"
        :current-page="pageNum"
        layout="total, sizes, prev, pager, next"
        @next-click="nextPage"
        @prev-click="prevPage"
        @size-change="sizeChange"
        @current-change="currentPage"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "OrderPage",
  data() {
    return {
      pageNum: 1,
      pageSize: 5,
      total: 0,
      orders: [],
      mySkuOrderDto: {},
      phone: ""
    };
  },
  methods: {
    orderStatus(statusCode) {
      if (statusCode === 108) {
        return "待发货";
      }
      return "已发货";
    },
    prevPage(val) {
      //点击上一页触发
      this.pageNum = val;
      this.queryOrders();
    },
    nextPage(val) {
      //点击下一页触发
      this.pageNum = val;
      this.queryOrders();
    },
    sizeChange(val) {
      //val每一页条数
      this.pageNum = 1;
      this.pageSize = val;
      this.queryOrders();
    },
    currentPage(val) {
      this.pageNum = val;
      this.queryOrders();
    },
    queryCondition() {
      thispageNum = 1;
      this.queryOrders();
    },
    queryOrders() {
      //带分页参数pageNum,pageSize
      let pageParam = {};
      pageParam.pageNum = this.pageNum;
      pageParam.pageSize = this.pageSize;
      this.mySkuOrderDto.userTelephone = this.phone;
      pageParam.param = this.mySkuOrderDto;
      this.$axios.post("api/productOrder/queryOrders", pageParam).then(res => {
        if (res.data.code == 200) {
          let pageData = res.data.data;
          this.orders = pageData.records;
          console.log(this.orders);
          //给分页参数赋值
          this.total = pageData.total;
          this.pageNum = pageData.current;
          this.pageSize = pageData.size;
        }
      });
    },
    stopOrder(orderNum) {
      this.$axios.get("api/staffOrder/alipay/refund?orderNum=" + orderNum).then(res => {
        if (res.data.code == 200) {
          this.$message.success("取消成功!");
          this.queryOrders();
        }
      });
    }
  },
  created() {
    this.phone = localStorage.getItem("username");
    this.queryOrders();
  }
};
</script>
  
  <style scoped>
.order-page {
  padding: 20px;
}

.search-bar {
  margin-bottom: 20px;
}

.order-item {
  margin-bottom: 10px;
}

.el-table .el-button {
  margin: 0;
}

.el-table .el-link {
  margin-right: 10px;
}
</style>
  